<template>
	<view style="display: flex;flex-direction: column;background-color: #f3f7fe;padding: 30rpx;min-height: 100vh;">
		<view style="background-color: #fff;padding: 20rpx;border-radius: 20rpx">
			<view class="header" style="display: flex;border-bottom: 1px solid #f3f7fe;padding-bottom: 30rpx;">
				<div class="header-menu" style="width: 100%;">
					<div class="mint-navbar" style="width: 100%;">
						<a :class="type =='0'?'mint-tab-item is-selected':'mint-tab-item'" @click="changeType(0)">
							<div class="mint-tab-item-label">日</div>
						</a>
						<a :class="type =='1'?'mint-tab-item is-selected':'mint-tab-item'" @click="changeType(1)">
							<div class="mint-tab-item-label">周</div>
						</a>
						<a :class="type =='2'?'mint-tab-item is-selected':'mint-tab-item'" @click="changeType(2)">
							<div class="mint-tab-item-label">月</div>
						</a>
					</div>
				</div>
			</view>

			<view class="calendar_container">
				<dayCalendar v-if="type == '0'" :sundayIndex="6" mode="close" @change="change" />
				<monthCalendar v-if="type == '1'" :sundayIndex="6" mode="close" @change="change" />
				<yearCalendar v-if="type == '2'" :sundayIndex="6" mode="close" @change="change" />
			</view>
			<!-- 日统计 -->
			<view>
				<van-grid :column-num="3" :border="false">
					<van-grid-item @click="toWorkflow(0)">
						<span>{{data.dkCount}}</span>
						<span style="margin-top: 30rpx; font-size: 12px; color: rgb(158, 165, 183);">打卡人数</span>
					</van-grid-item>
					<van-grid-item @click="toWorkflow(1)">
						<span>{{data.sbCount}}</span>
						<span style="margin-top: 30rpx; font-size: 12px; color: rgb(158, 165, 183);">上下班打卡人数</span>
					</van-grid-item>
					<van-grid-item @click="toWorkflow(2)">
						<span>{{data.wqCount}}</span>
						<span style="margin-top: 30rpx; font-size: 12px; color: rgb(158, 165, 183);">外勤打卡人数</span>
					</van-grid-item>
					<van-grid-item @click="toWorkflow(3)">
						<span>{{data.wdkCount}}</span>
						<span style="margin-top: 30rpx; font-size: 12px; color: rgb(158, 165, 183);">未打卡人数</span>
					</van-grid-item>
					<van-grid-item @click="toWorkflow(4)">
						<span>{{data.qjCount}}</span>
						<span style="margin-top: 30rpx; font-size: 12px; color: rgb(158, 165, 183);">请假人数</span>
					</van-grid-item>
					<van-grid-item @click="toWorkflow(5)">
						<span>{{data.kgCount}}</span>
						<span style="margin-top: 30rpx; font-size: 12px; color: rgb(158, 165, 183);">旷工人数</span>
					</van-grid-item>
					<van-grid-item @click="toWorkflow(6)">
						<span>{{data.xxCount}}</span>
						<span style="margin-top: 30rpx; font-size: 12px; color: rgb(158, 165, 183);">休息人数</span>
					</van-grid-item>
					<van-grid-item @click="toWorkflow(7)">
						<span>{{data.wpbCount}}</span>
						<span style="margin-top: 30rpx; font-size: 12px; color: rgb(158, 165, 183);">未排班人数</span>
					</van-grid-item>
					<van-grid-item @click="toWorkflow(8)">
						<span>{{data.cd}}</span>
						<span style="margin-top: 30rpx; font-size: 12px; color: rgb(158, 165, 183);">迟到人数</span>
					</van-grid-item>
					<van-grid-item @click="toWorkflow(9)">
						<span>{{data.zt}}</span>
						<span style="margin-top: 30rpx; font-size: 12px; color: rgb(158, 165, 183);">早退人数</span>
					</van-grid-item>
					
					<van-grid-item @click="toWorkflow(10)">
						<span>{{data.lq}}</span>
						<span style="margin-top: 30rpx; font-size: 12px; color: rgb(158, 165, 183);">漏签人数</span>
					</van-grid-item>
					
					<van-grid-item @click="toWorkflow(11)">
						<span>{{data.cc}}</span>
						<span style="margin-top: 30rpx; font-size: 12px; color: rgb(158, 165, 183);">出差人数</span>
					</van-grid-item>
<van-grid-item @click="toWorkflow(12)">
						<span>{{data.gc}}</span>
						<span style="margin-top: 30rpx; font-size: 12px; color: rgb(158, 165, 183);">外出人数</span>
					</van-grid-item>
					<van-grid-item @click="toWorkflow(13)">
						<span>{{data.jb}}</span>
						<span style="margin-top: 30rpx; font-size: 12px; color: rgb(158, 165, 183);">加班人数</span>
					</van-grid-item>
				</van-grid>


			</view>
			<!-- 日统计 -->
			<!-- 周统计 -->

			<!-- 周统计 -->
			<view style="font-size: 12px;color:#999 ;padding-bottom:20rpx;border-bottom: 1px solid #eee;">
				统计结果至&nbsp;{{data.time}}</view>
			<view style="margin-top: 20rpx;" v-if="type == 0">
				<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
					<view style="display: flex;justify-content: space-between;color: #999;font-size: 12px;">
						<view style="width: 200rpx;">部门出勤率</view>
						<view style="width: 300rpx;"></view>
						<view>出勤人数</view>
					</view>
					<view v-for="item in list" :key="item" class="item"
						style="align-items: center;height:60rpx;margin-top: 10rpx;display: flex;justify-content: space-between;">
						<view class="cq-title" style="width: 200rpx;" @click="goto(item.id)">
							{{item.name}}
						</view>
						<view style="width: 300rpx;">
							<van-progress :percentage="item.cql" />
						</view>
						<view style="font-size: 12px;">{{item.cqCount}}/{{item.allCount}}</view>
					</view>
				</van-list>
			</view>
		</view>
	</view>
</template>

<script setup>
	import dayCalendar from '@/components/zsy-calendar/day-calendar'
	import monthCalendar from '@/components/zsy-calendar/month-calendar'
	import yearCalendar from '@/components/zsy-calendar/year-calendar'
	import Timeline from '@/components/Timeline'
	import AttendByDepartFirst from '@/components/AttendByDepartFirst'
	import {
		parseTime,
	} from '@/components/zsy-calendar/js/utils.js'
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import {
		showLoadingToast,
		closeToast
	} from 'vant';


	const route = useRoute()
	const fromDate = ref('')
	const departId = ref('')
	const toDate = ref('')
	const type = ref(0)
	const data = ref({})

	const list = ref([]);
	const loading = ref(false);
	const finished = ref(false);
	const startDate = ref('')
	const endDate = ref('')

	const goto = (id) => {
		uni.navigateTo({
			url: '/pages/AttendReport/AttendReport?type=' + type.value + '&departId=' + id

		})
	}
	
		
	const getData=()=>{
		 loading.value = true;
		 onLoad()
	}

	onMounted(() => {

		if (route.query['type'] != undefined) {
			type.value = route.query['type']
		}


	})
	const onLoad = () => {
			uni.request({
				url: '/mobile/heo/GetDepartOrderList.jsp',
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					startDate: fromDate.value,
					endDate: toDate.value,
					departId: route.query['departId']

				},
				success: (res) => {
					const result = res.data;
					if (result.ret === '0') {
						list.value = result.data
					}

				},
				complete: () => {
					
					loading.value = false;
					finished.value = true
				}

			})

			// 加载状态结束

	}





	const toWorkflow = (index) => {
		uni.navigateTo({
			url: '/pages/AttendDetail/AttendDetail?type=' + index + '&startDate=' + fromDate.value +
				'&endDate=' + toDate.value + '&lx=' + type.value + '&departId=' + route.query['departId']

		})
	}
	const init = (startDate, endDate, lx) => {
		showLoadingToast({
			message: '加载中...',
			duration: 0,
			forbidClick: true,
		});


		uni.request({
			url: '/mobile/heo/KqReportController.jsp',
			method: 'POST',
			header: {
				'content-type': 'application/x-www-form-urlencoded'
			},
			data: {
				fromDate: startDate,
				toDate: endDate,
				type: lx,
				departId: route.query['departId']
			},
			success: (res) => {
				const result = res.data;
				if (result.ret === '0') {
					data.value = result.data
					//设置标题
					if (result.data.name != '0') {
						uni.setNavigationBarTitle({
							title: result.data.name
						});
					}
				} else {

				}

			},
			complete: () => {
				setTimeout(() => {
					closeToast()
				}, 1000)
			}

		})
	}

	const change = (e) => {
		if (e.type == 'day') {
			fromDate.value = e.selectedDate
			toDate.value = e.selectedDate
			init(e.selectedDate, e.selectedDate, 0)
			getData()

		} else if (e.type == 'week') {
			if (e.selectedDate.length == 7) {
				fromDate.value = parseTime(new Date(e.selectedDate[0].year, e.selectedDate[0].month - 1, e
					.selectedDate[0].date), '{y}-{m}-{d}')
				toDate.value = parseTime(new Date(e.selectedDate[6].year, e.selectedDate[6].month - 1, e.selectedDate[
					6].date), '{y}-{m}-{d}')
				init(fromDate.value, toDate.value, 1)
			}

		} else if (e.type == 'month') {
			fromDate.value = e.selectedDate
			toDate.value = e.selectedDate,
				init(e.selectedDate, e.selectedDate, 2)
		}
	}

	const changeType = (types) => {

		type.value = types
	}
</script>

<style scoped>

	.mint-navbar {
		height: 0.5rem;
		display: flex;
		background-color: #9ea5b7;
		padding: 0.1rem;
		border-radius: 0.1rem;
		margin-top: 0.2rem;
	}

	.cq-title {
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex-shrink: 0;
		color: #000;
	}

	.header-menu {
		display: flex;
		align-items: center;
	}

	.mint-navbar {
		height: 50rpx;
		display: flex;
		background-color: #9ea5b7;
		padding: 10rpx;
		border-radius: 10rpx;
	}

	.is-selected {
		background-color: #FFF;
		border-radius: 10rpx;
		font-weight: 600;
	}

	.mint-tab-item {
		flex: 1;
		color: #000;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		width: 90rpx;
		cursor: pointer;
	}

	.data_person_day {
		min-height: 400rpx;
	}
</style>
